<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--引入外部自己编写的css样式  -->
<link type="text/css" rel="stylesheet" href="../css/check/Backhome.css" />
<link type="text/css" rel="stylesheet" href="../css/check/checkhome.css" />
<!--一下为easyui框架相关文件  -->
<link href="../lib/easyui/themes/default/easyui.css" type="text/css" rel="stylesheet" />
<link href="../lib/easyui/themes/icon.css" type="text/css" rel="stylesheet" />
<link href="../zxy/css/home/home.css" type="text/css" rel="stylesheet" />

<script src="../lib/easyui/jquery.min.js"></script>
<script src="../lib/easyui/jquery.easyui.min.js"></script>
<script src="../lib/easyui/easyui-lang-zh_CN.js"></script>
<script src="../lib/easyui/jquery.easyui.mobile.js"></script>
<script src="../lib/easyui/easyloader.js"></script>
<script src="../hyn/js/time.js"></script>

<script type="text/javascript">
	function add_tabs(title, url) {
		//如果当前标签已经存在， 让其选中
		if ($("#tt").tabs("exists", title)) {
			$("#tt").tabs("select", title);
			return;
		}
		//创建tab需要的属性
		var info = {
			title : title,
			href : url,
			closable : true
		}
		//调用add方法创建新的tab
		$('#tt').tabs('add', info);
	}
	//更新当前tab页面的内容， 重新渲染新页面
	function update_tabs(url) {
		var tab = $('#tt').tabs('getSelected'); // get selected panel
		tab.panel('refresh', url);
	}
	//关闭当前
	function fn_remove() {
		//找到当前选项卡
		var curTab = $("#tt").tabs("getSelected");
		//找到当前选项卡的索引
		var idx = $("#tt").tabs("getTabIndex", curTab);
		//保留第一个大首页
		if (idx == 0)
			return;
		//根据索引删除
		$("#tt").tabs("close", idx);
	}
	function fn_removeall() {
		//得到所有选项卡
		var tabs = $("#tt").tabs("tabs");
		//从后面往前面的顺序删除
		for (var i = tabs.length - 1; i > 0; i--) {
			//根据索引找到当前选项卡
			var curTab = $("#tt").tabs("getTab", i);
			//找到当前选项卡的索引
			var idx = $("#tt").tabs("getTabIndex", curTab);
			//根据索引删除
			$("#tt").tabs("close", idx);
		}
	}

	$(function() {
		$("#btne").linkbutton({
			onClick : function() {
				add_tabs('后台考勤页面', 'checkBackhome');
			}
		});

		$("#btne2").linkbutton({
			onClick : function() {
				add_tabs('事务日历', 'calendar');
			}
		});
		$("#btne3").linkbutton({
			onClick : function() {
				add_tabs('刷卡记录', 'checkFlush');
			}
		});
		
		
		$("#btne4").linkbutton({
			onClick : function() {
				add_tabs('考勤月报告', 'checkreport');
			}
		});
		$("#fnr").linkbutton({
			onClick : function() {
				fn_remove();
			}
		});

		$("#fnro").linkbutton({
			onClick : function() {
				fn_removeall();
			}
		});

	});
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',title:'人力资源系统考勤客户端',split:true,tools:'#tab-tools-title'"
		style="height: 10px;"></div>
	<div data-options="region:'south',title:'考勤自助系统',split:true,closed:false"
		style="height: 200px;">
		<div id="head">
			<h2 id="headh2">
				考勤期间<span>2017-09</span>
			</h2>
			<div id="headbody">
				<div class="left">
					<p>
						应出勤<span>30</span>天
					</p>
					<p>
						实出勤<span>2</span>天
					</p>
					<p>
						缺 勤<span>1</span>天
					</p>
				</div>
				<div class="center">
					<p>
						迟到<span>3</span>次
					</p>
					<p>
						早退<span>3</span>次
					</p>
					<p>
						旷工<span>3</span>次
					</p>
				</div>
				<div class="right">
					<p>
						平日加班<span>30</span>h
					</p>
					<p>
						休日加班<span>30</span>h
					</p>
					<p>
						假日加班<span>30</span>h
					</p>
				</div>
			</div>
		</div>
	</div>
	<div 
		data-options="region:'west',title:'考勤管理',split:true,selected:false"
		style="width: 200px;">
		<div id="aa" class="easyui-accordion"
			data-options="fit:true,selected:false">
			<div title="申请中心" >
				<a id="btne" class="easyui-linkbutton"
					data-options="plain:true,text:'加班申请',width:'100%'"></a> <a
					id="btne2" class="easyui-linkbutton"
					data-options="plain:true,text:'请假申请',width:'100%'"></a> <a
					id="btne3" class="easyui-linkbutton"
					data-options="plain:true,text:'外出申请',width:'100%'"></a> <a
					id="btne4" class="easyui-linkbutton"
					data-options="plain:true,text:'补卡申请',width:'100%'"></a> <a
					id="btne5" class="easyui-linkbutton"
					data-options="plain:true,text:'调休申请',width:'100%'"></a>
			</div>
			<div title="考勤卡中心" data-options="fit:true">
				<a id="btne" class="easyui-linkbutton"
					data-options="plain:true,text:'考勤卡',width:'100%'"></a> <a
					id="btne2" class="easyui-linkbutton"
					data-options="plain:true,text:'考勤规则',width:'100%'"></a>
			</div>
			<div title="事务通知中心">
				<a id="btne" class="easyui-linkbutton"
					data-options="plain:true,text:'事务通知',width:'100%'"></a>
			</div>
			<div title="考勤结果中心">
				<a id="btne" class="easyui-linkbutton"
					data-options="plain:true,text:'考勤卡',width:'100%'"></a> <a id="btne"
					class="easyui-linkbutton"
					data-options="plain:true,text:'考勤卡',width:'100%'"></a> <a id="btne"
					class="easyui-linkbutton"
					data-options="plain:true,text:'考勤卡',width:'100%'"></a>
			</div>
		</div>
	</div>
	<div data-options="region:'center'">
		<div id="tt" class="easyui-tabs"
			data-options="fit:true,tools:'#tab-tools'">
			<div id="bigshow" title="首页" style="padding: 20px; display: none;">
				<p></p>
				<p id="bigdiv1">
                <span id="info"></span>
					<span id="bigdiv1center"></span> 
				</p>
				<div id="bigdiv2" class="easyui-linkbutton"
					data-options="plain:true">考<img src="../../image/checkImg/check1.png" style="width: 50px; height: 50px;"/>勤</div>
				<div id="bigdiv3">
					<div>
						<img src="../../image/checkImg/jiaban1.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>加班申请</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/holidayapply.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>请假申请</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/buka.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>补卡申请</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/waiqin.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>外勤申请</p></a>
					</div>
				</div>
				<div id="bigdiv4">
					<div>
						<img src="../../image/checkImg/daka.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>打卡记录</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/checkreport2.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>考勤统计</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/checkreport.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>月考勤汇总</p></a>
					</div>
					<div>
						<img src="../../image/checkImg/checkcandr.png"
							style="width: 100px; height: 100px;" /> <a href="#"><p>事务通知</p></a>
					</div>
				</div>
			</div>
		</div>
		<div id="tab-tools">
			<a id="fnr" class="easyui-linkbutton"
				data-options="plain:true,iconCls:'icon-remove'"></a> <a id="fnro"
				class="easyui-linkbutton"
				data-options="plain:true,iconCls:'icon-cancel'"></a>
		</div>
		<!--在标题栏添加头像  -->
		<div id="tab-tools-title">
			<a id="fnr"  class="easyui-linkbutton adminstor"
				data-options="plain:true,iconCls:'icon-man',width:'40px'"></a> 
			<!--未生效 <div id="admin" style="display:none">
			<p>adminstor</p>
			<a href="#"><p>退出</p></a>
			</div> -->
		</div>
		
		
	</div>
<!-- 引入时间戳js脚本 -->
	<script type="text/javascript" src="../js/check/time.js"></script> 
</body>
</html>